<template>
  <div class="myTable">
    <el-row class="searchRow">
      <el-input style="width:200px"
                placeholder="受理内容"
                prefix-icon="el-icon-search"
                class="mr15"
                v-model="BJCONTENT">
      </el-input>
      <el-button  type="success" @click="query(1)" >查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>
    </el-row>

    <el-table :data="tableData.data" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
      <el-table-column  label="工单编号" width="240px">
        <template slot-scope="scope">
          <el-link type="primary"  class="caseDetail" @click="showDetail(scope.row)">{{scope.row.gdbh}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="业务建立时间" width="260px" >
        <template slot-scope="scope"  >
          {{scope.row.bizCreateTime}}
        </template>
      </el-table-column>
      <el-table-column label="处置部门" :show-overflow-tooltip="true">
        <template slot-scope="scope"  >
          {{scope.row.deptname}}
        </template>
      </el-table-column>
      <el-table-column label="大类" width="180px">
        <template slot-scope="scope"  >
          {{scope.row.mainent}}
        </template>
      </el-table-column>
      <el-table-column label="小类" >
        <template slot-scope="scope"  >
          {{scope.row.minorent}}
        </template>
      </el-table-column>
      <el-table-column label="受理内容" >
        <template slot-scope="scope"  >
          {{scope.row.bjcontent}}
        </template>
      </el-table-column>
      <el-table-column label="事部件类型" width="180px">
        <template slot-scope="scope"  >
          {{scope.row.sbjlx}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" style="margin-top: 35px"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :pager-count="7"> </el-pagination>

    <el-dialog title=""  width="80%" :fullscreen=false class="fullDialog" :visible.sync="dialogTableVisible">
      <el-row>
        <el-col :span="11" :offset="1">
          <table class="myTable">
            <tr><td>工单编号</td><td>{{dataDetail.gdbh}}</td></tr>
            <tr><td>受理类型</td><td>{{dataDetail.accepttype}}</td></tr>
            <tr><td>大类</td><td>{{dataDetail.mainent}}</td></tr>
            <tr><td>小类</td><td>{{dataDetail.minorent}}</td></tr>
            <tr><td>事部件类型</td><td>{{dataDetail.sbjlx}}</td></tr>
            <tr><td>所在街道</td><td>{{dataDetail.street}}</td></tr>
            <tr><td>所在社区</td><td>{{dataDetail.community}}</td></tr>
            <tr><td>立案条件</td><td>{{dataDetail.acceptcasecondition}}</td></tr>
            <tr><td>是否立案</td><td>{{dataDetail.sfla}}</td></tr>
            <tr><td>受理内容</td><td>{{dataDetail.bjcontent}}</td></tr>
            <tr><td>受理方式</td><td>{{dataDetail.acceptmode}}</td></tr>
            <tr><td>核查内容</td><td>{{dataDetail.checkContent}}</td></tr>
            <tr><td>结案人</td><td>{{dataDetail.closeSignname}}</td></tr>
            <tr><td>结案人签字时间</td><td>{{dataDetail.closeSigndate}}</td></tr>
          </table>
        </el-col>
        <el-col :span="11">
          <table class="myTable">
            <tr>
              <td class="narrowTd">上<br/>报<br/>图<br/>片</td>
              <td class="picTd">
                <img v-for="pic in photoDetail.reportAttachments" class="myPic" v-bind:key="pic.fjName" :src="pic.picPath"/>
              </td>
            </tr>
            <tr>
              <td class="narrowTd">处<br/>理<br/>图<br/>片</td>
              <td class="picTd">
                <img v-for="pic in photoDetail.dealAttachments" class="myPic"  v-bind:key="pic.fjName" :src="pic.picPath"/>
              </td>
            </tr>
          </table>

        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "eventLaw",
    data: function() {
      return {
        tableData:{},
        dataDetail:{},
        photoDetail:{},
        dialogTableVisible:false,
        BJCONTENT:""
      }
    },
    methods: {
      query: function (pageNo) {
        let vm = this;
        let data = {
          curPageNO: pageNo,
          pageSize: 10,
          startTime: "",
          BJCONTENT:vm.BJCONTENT,
          endTime: ""
        }
        this.$http.post("/yczmq/bigScreen/supervisionWork/page", window.changeDataType(data)).then(resp => {
          if (resp.status == 0) {
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.BJCONTENT = "";
      },
      handleCurrentChange(pageNo){
        this.query(pageNo);
      },
      showDetail:function(item){
        let vm = this;
        vm.dataDetail = {};
        vm.photoDetail = {};
        this.$http.get("/yczmq/bigScreen/supervisionWork/get/"+item.id).then(resp => {
          if (resp.status == 0) {
            vm.dataDetail = resp.data;
          }
        })
        this.$http.get("/yczmq/bigScreen/supervisionWork/attachments/"+item.gdbh).then(resp => {
          if (resp.status == 0) {
            vm.photoDetail = resp.data;
          }
        })
        vm.dialogTableVisible = true;
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style>
 /* .myTable{
    width: 100%;
    font-weight:400;
  }
  .myTable tr td:nth-child(odd){
    width:230px;
    height:40px;
    color:rgba(133,133,133,1);
    background:rgba(251,251,255,1);
    border:1px solid rgba(226,229,237,1);
    text-align: left;
    padding-left: 15px;
  }
  .myTable tr td:nth-child(even){
    color:rgba(51,51,51,1);
    border:1px solid rgba(226,229,237,1);
    text-align: left;
    padding-left: 15px;
  }*/
  .myTable tr td.narrowTd{
    width: 45px;
    padding-left: 0;
    text-align: center;
  }
  .picTd{
    padding:  0 0 15px 15px;
  }
  .myPic{
    max-width: 48%;
    margin-right: 2%;
    margin-top: 2%;
    float: left;
  }
</style>
<style scoped>

</style>